<nz-skeleton [nzLoading]="loading" [nzActive]="true" class="d-block mt-3">
  <ng-container>
    <ng-container *ngIf="!activityLogs?.length">
      <div class="pt-4 pb-5 text-center">
        <div class="no-data-img-holder mx-auto mb-3">
          <img src="/assets/images/empty-box.webp" class="img-fluid" alt="">
        </div>
        <span nz-typography class="no-data-text">No activity logs to show.</span>
      </div>
    </ng-container>
    <ng-container *ngFor="let log of activityLogs">
      <div class="single-log">
        <nz-card [nzTitle]="cardTitle" class="breakdown-card">
          <div class="single-day-logs">
            <nz-timeline *ngIf="log.logs.length">
              <nz-timeline-item *ngFor="let log_item of log.logs">
              <span nz-typography class="line-28 activity-log-text" (click)="openTask(log_item.task_id, log_item.project_id)">
                Updated

                <b class="weight-500">
                  <ng-container [ngSwitch]="log_item.attribute_type">
                    <span *ngSwitchCase="'status'"> Status </span>
                    <span *ngSwitchCase="'priority'"> Priority </span>
                    <span *ngSwitchCase="'phase'"> Phase </span>
                    <span *ngSwitchCase="'start_date'"> Start Date </span>
                    <span *ngSwitchCase="'end_date'"> End Date </span>
                  </ng-container>
                </b>

                from

                <ng-container [ngSwitch]="log_item.attribute_type">
                  <!-- status -->
                  <span *ngSwitchCase="'status'">
                    <nz-tag [nzColor]="log_item.previous_status?.color_code+'69'"
                            class="rounded-pill">{{log_item.previous}}</nz-tag>
                  </span>
                  <!-- priority -->
                  <span *ngSwitchCase="'priority'">
                    <nz-tag [nzColor]="log_item.previous_priority?.color_code+'69'"
                            class="rounded-pill">{{log_item.previous}}</nz-tag>
                  </span>
                  <!-- phase -->
                  <span *ngSwitchCase="'phase'">
                    <nz-tag
                      [nzColor]="log_item.previous_phase?.color_code ? log_item.previous_phase?.color_code+'69' : '#fbc84c69'"
                      class="rounded-pill">{{log_item.previous ? log_item.previous : 'Unmapped'}}</nz-tag>
                  </span>
                  <!-- start date -->
                  <span *ngSwitchCase="'start_date'">
                    <ng-container *ngIf="log_item.previous">
                      <nz-tag class="me-0">{{log_item.previous}}</nz-tag>
                    </ng-container>
                    <ng-container *ngIf="!log_item.previous">
                      <nz-tag class="me-0">None</nz-tag>
                    </ng-container>
                  </span>
                  <!-- end date -->
                  <span *ngSwitchCase="'end_date'">
                    <ng-container *ngIf="log_item.previous">
                      <nz-tag class="me-0">{{log_item.previous}}</nz-tag>
                    </ng-container>
                    <ng-container *ngIf="!log_item.previous">
                      <nz-tag class="me-0">None</nz-tag>
                    </ng-container>
                  </span>

                </ng-container>

                to

                <ng-container [ngSwitch]="log_item.attribute_type">
                  <!-- status -->
                  <span *ngSwitchCase="'status'">
                    <nz-tag [nzColor]="log_item.next_status?.color_code+'69'"
                            class="rounded-pill">{{log_item.current}}</nz-tag>
                  </span>
                  <!-- priority -->
                  <span *ngSwitchCase="'priority'">
                    <nz-tag [nzColor]="log_item.next_priority?.color_code+'69'"
                            class="rounded-pill">{{log_item.current}}</nz-tag>
                  </span>
                  <!-- phase -->
                  <span *ngSwitchCase="'phase'">
                    <nz-tag
                      [nzColor]="log_item.next_phase?.color_code ? log_item.next_phase?.color_code+'69' : '#fbc84c69'"
                      class="rounded-pill">{{log_item.current ? log_item.current : 'Unmapped'}}</nz-tag>
                  </span>
                  <!-- start date -->
                  <span *ngSwitchCase="'start_date'">
                    <ng-container *ngIf="log_item.current">
                      <nz-tag class="me-0">{{log_item.current}}</nz-tag>
                    </ng-container>
                    <ng-container *ngIf="!log_item.current">
                      <nz-tag class="me-0">None</nz-tag>
                    </ng-container>
                  </span>
                  <!-- end date -->
                  <span *ngSwitchCase="'end_date'">
                    <ng-container *ngIf="log_item.current">
                      <nz-tag class="me-0">{{log_item.current}}</nz-tag>
                    </ng-container>
                    <ng-container *ngIf="!log_item.current">
                      <nz-tag class="me-0">None</nz-tag>
                    </ng-container>
                  </span>

                </ng-container>

                in <b class="weight-500">{{log_item.task_name}}</b> within <b class="weight-500">{{log_item.project_name}}</b> <nz-tag
                class="ms-2 mt-1">{{log_item.task_key}}</nz-tag>
              </span>
              </nz-timeline-item>
            </nz-timeline>
            <ng-container *ngIf="!log.logs.length">
              <div class="d-block mb-4">
                No time logs to show.
              </div>
            </ng-container>
          </div>
        </nz-card>
        <ng-template #cardTitle>
          <div class="log-day">
            <span nz-typography>{{log.log_day | date : 'MMM dd, YYYY'}}</span>
          </div>
        </ng-template>
      </div>
      <nz-divider></nz-divider>
    </ng-container>
  </ng-container>
</nz-skeleton>
